<template>
<div :class="$style.container">
  <vue-better-scroll class="wrapper"
      ref="scroll"
      :scrollbar="scrollbarObj"
      :pullDownRefresh="pullDownRefreshObj"
      :pullUpLoad="pullUpLoadObj"
      :startY="parseInt(startY)"
      @pullingDown="onPullingDown"
      @pullingUp="onPullingUp">   
      <list :lists="lists"/>
  </vue-better-scroll>
  <div>
    <loading :show="showLoading" text="加载中..."></loading>
    <alert v-model="showAlert" title="提示" :content="tip"></alert>
  </div>
</div>
</template>

<script>
import List from './components/lists'
import http from '../../APIService/http'
import VueBetterScroll from 'vue2-better-scroll'
import { Loading, Alert } from 'vux'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      lists: [],
      keyWord: '',
       // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
      scrollbarObj: {
        fade: true
      },
        // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
      pullDownRefreshObj: {
        threshold: 90,
        stop: 40
      },
        // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
      pullUpLoadObj: {
        threshold: 0,
        txt: {
          more: '加载更多',
          noMore: '没有更多数据了'
        }
      },
      startY: 0, // 纵轴方向初始化位置
      scrollToX: 0,
      scrollToY: 0,
      scrollToTime: 700,
      page: {
        current: 1,
        size: 8
      }
    }
  },
  components: {
    List,
    Loading,
    Alert,
    VueBetterScroll
  },
  mounted () {
    this.onPullingDown()
  },
  methods: {
    async init () {
      try {
        let params = {
          current: this.page.current,
          size: this.page.size
        }
        let res = await http.get(`/dianshang/searchFilmPage`, params)
        if (res.code === 0) {
          this.showLoading = false
          let arr = res.data
          return arr
        } else if (res.code === -1) {
          this.showLoading = false
          this.tip = res.msg
          this.showAlert = true
        } else {
          throw new Error('error')
        }
      } catch (err) {
        console.log('get list fail:', err)
        this.showLoading = false
      }
    },
    // 滚动到页面顶部
    scrollTo () {
      this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime)
    },
    async onPullingDown () {
      this.lists = []
      this.page.current = 1
        // 模拟下拉刷新
      let arr = await this.init()
      this.lists = [...arr]
      if (arr.length < this.page.size) {
        this.$refs.scroll.forceUpdate(false)
      } else {
        this.$refs.scroll.forceUpdate(true)
      }
    },
    async onPullingUp () {
        // 模拟上拉 加载更多数据
      this.page.current++
      let arr = await this.init()
      this.lists = this.lists.concat(arr)
      if (arr.length < this.page.size) {
        this.$refs.scroll.forceUpdate(false)
      } else {
        this.$refs.scroll.forceUpdate(true)
      }
    }
  }
}
</script>

<style lang='less' module>
.container {
  height:100vh;
}

</style>